<template>
	<view class="content">
		<view class="row">
			<text class="tit">手机号:</text>
			<input class="input" type="number" maxlength="11" v-model="registerData.phone" placeholder="请输入手机号" placeholder-class="placeholder" />
		</view>
		<view class="row">
			<text class="tit">验证码:</text>
			<input class="input" v-model="registerData.verCode" maxlength="6" type="number" placeholder="请输入验证码" placeholder-class="placeholder" />
			<button class="code" @click="getVerificationCode" :disabled="disabled">{{ codeMsg }}</button>
		</view>
		<view class="row">
			<text class="tit">密码:</text>
			<input class="input" type="password" v-model="registerData.password" placeholder="请输入新密码(6-20位英文或数字）" placeholder-class="placeholder" />
		</view>
		<view class="row tipsBox">
			<image :src="xzStatus ? require('../../static/icon/xz_check@2x.png') : require('../../static/icon/xz@2x.png')" @click="xzChecked"></image>
			同意
			<text class="tips" @click="showTips(1)">《用户协议》</text>
			和
			<text class="tips" @click="showTips(12)">《隐私政策》</text>
		</view>
		<button class="add-btn" @click="login">注册并登陆</button>
		<uni-popup ref="uniPop" type="dialog">
			<uni-popup-dialog :type="msgType" :title="title" :content="content" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import md5 from '../../api/md5.js'
export default {
	data() {
		return {
			registerData: {
				password: '',
				mobile: '',
				verCode: '',
				
			},
			userId:"",
			disabled: false,
			type: 'top',
			msgType: 'info',
			message: '这是一条成功消息提示',
			value: '默认输入的内容',
			xzStatus: false,
			title: '温馨提示',
			content: `尊敬的用户, 感谢您注册觅术APP软件, 我们非常重视您的个人信息和隐私保护. 本应用需要建立数据连接才能为你提供各种服务, 现向您进行以下说明：
1. 为了保证你在使用本客户端时能够正常发布需求服务，我们需要你授权我们访问你的图片、视频等多媒体资源以及收集使用你的必要信息;
2. 为了向你提供更便捷、更符合你个性化需求的信息展示、搜索及精准推送服务, 我们会获取你的定位信息, 你也有权取消授权; 
3. 除非法律规定外, 未经你的同意, 我们不会从第三方共享、转让和公开披露你的信息;
4. 你可以访问、更正、删除你的个人信息, 也可以注销你的个人账户;
5. 为了更好的保障您的权益, 请您认真阅读《用户协议》和《隐私政策》的全部内容, 同意并接受全部条款后开始使用我们的产品和服务.`,
			codeMsg: '获取验证码'
		};
	},
	mounted() {},
	onLoad(option) {
		if(option.userid){
			this.userId = option.userid
		}
	},
	methods: {
		/**
		 * 对话框点击确认按钮
		 */
		dialogConfirm(done) {
			console.log('点击确认');
			console.log(this.xzStatus);
			// 需要执行 done 才能关闭对话框
			var Password = md5(this.registerData.password)
			let that = this;
			that.$http.post('/user/register', { phone: this.registerData.phone, code: this.registerData.verCode, type: 1,password:Password,userId:this.userId }).then(res => {
				if (res.code == '0') {
					if (res.data != '') {
						uni.setStorageSync('token', res.data.jwtToken);
						uni.setStorageSync('name', res.data.name);
						uni.setStorageSync('phone', res.data.phone);
						uni.setStorageSync('headImg', res.data.headImg);
						uni.setStorageSync('userType', res.data.userType);
						uni.setStorageSync('isFirst', res.data.isFirst);
						uni.setStorageSync('freeNumber', res.data.freeNumber);
						uni.setStorageSync('balance', res.data.balance);
						if(that.userId!==''){
							uni.showToast({
								title: '注册成功，请下载APP登录',
								duration: 2000,
								
							});
						}else{
							uni.showToast({
								title: '登录成功',
								duration: 1000,
								success: res => {
									uni.reLaunch({
										url: '../home/home'
									});
									
								}
							});
						}
						
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
			
			done();
		},
		/**
		 * 对话框取消按钮
		 */
		dialogClose(done) {
			this.msgType = 'info';
			this.message = '点击了对话框的取消按钮';
			// 需要执行 done 才能关闭对话框
			done();
		},
		//用户协议
		showTips(type) {
			uni.navigateTo({
				url: `./userTips?type=`+type
			});
		},
		
		xzChecked() {
			this.xzStatus = !this.xzStatus;
		},
		//验证手机号
		validePhoneNumber() {
			var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
			if (this.registerData.phone == null || this.registerData.phone == '') {
				uni.showToast({
					title: '手机号码不能为空',
					icon: 'none',
					duration: 2000
				});
				return false;
			} else if (!myreg.test(this.registerData.phone)) {
				uni.showToast({
					title: '手机号格式错误',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
		},
		//验证验证码
		getVerificationCode() {
			var flag = this.validePhoneNumber();
			if (flag != false) {
				let count = 60;
				this.codeMsg = count + 's';
				let timer = setInterval(() => {
					if (count <= 1) {
						clearInterval(timer);
						this.codeMsg = '获取验证码';
						this.disabled = false;
					} else {
						count--;
						this.codeMsg = count + 's';
						//获取验证码

						this.disabled = true;
					}
				}, 1000);
				this.$http.get('/sms/getSmsCode', { phone: this.registerData.phone, type: 2 }).then(res => {
					console.log(res);
					if (res.code == '0') {
						uni.showToast({
							title: '验证码已发送',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		//登录
		login() {
			let that = this;
			var flag = this.validePhoneNumber();
			console.log(flag);
			if (flag != false) {
				if (this.registerData.verCode == null || this.registerData.verCode == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				else if (this.registerData.password == null || this.registerData.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				 else if (!this.xzStatus) {
					uni.showToast({
						title: '请同意且阅读用户协议',
						icon: 'none',
						duration: 2000
					});
					return false;
				} else {
					this.$refs.uniPop.open();
					
				}
			}else{
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
			}
		}
	}
};
</script>

<style lang="scss">
page {
	padding-top: 16upx;
	background-color: #fff;
}
.tipsBox {
	flex-direction: row;
	font-size: 30upx;
	color: #22222a;
	> image {
		width: 30upx;
		height: 30upx;
		margin-right: 12upx;
	}
	.tips {
		color: #ff7517;
	}
}
.row {
	display: flex;
	align-items: center;
	position: relative;
	margin: 0 30upx;
	height: 110upx;
	background: #fff;
	border-bottom: 1upx solid rgba(238, 238, 238, 1);
	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
	}
	.code {
		width: 140upx;
		height: 48upx;
		background: rgba(253, 88, 10, 1);
		border-radius: 8upx;
		font-size: 24upx;
		color: #fff;
		text-align: center;
		line-height: 48upx;
		padding: 0;
	}
	.input {
		flex: 1;
		font-size: 30upx;
	}

	.icon-shouhuodizhi {
		font-size: 36upx;
	}
}

.add-btn {
	width: 600upx;
	height: 88upx;
	background: rgba(255, 117, 23, 1);
	border-radius: 8upx;
	font-size: 34upx;
	color: #fff;
	text-align: center;
	line-height: 88upx;
	margin-top: 160upx;
}
</style>
